<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.global.js"></script>
		<style>
			ul,li{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.tab{
				display: flex;
			}
			.tab-item{
				width: 140px;
				padding: 16px 0;
				text-align: center;
				border-bottom: 2px solid #495057;
				cursor: pointer;
				font-size: 18px;
			}
			.active{
				border-color: #b02a37;
				color: #b02a37;
				font-weight: 700;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul class="tab">
				<li class="tab-item"
					:class="{active:type=='login'}"
					@click="switchMenu('login')"
				>登陆</li>
				<li class="tab-item"
					:class="{active:type=='register'}"
					@click="switchMenu('register')"
				>注册</li>
			</ul>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						type:'login'
					}
				},
				methods:{
					switchMenu(type){
						this.type = type
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>